<template>
  <el-button type="warning" @click="visibleByDesc = true">{{ $t('指标说明') }}</el-button>

  <el-dialog :title="$t('帮助')" width="800px" v-model="visibleByDesc" top="7vh">
    <div class="descView">
      <el-descriptions class="item" :title="$t('组指标')" :column="1" border >
        <el-descriptions-item label="name">{{ $t('组名') }}</el-descriptions-item>
        <el-descriptions-item label="zIndex">{{ $t('层级，决定生成图片中各组绘制顺序，从0开始绘制') }}</el-descriptions-item>
        <el-descriptions-item label="rid">{{ $t('关联组id，将两组元素进行绑定，绑定前需确认两组元素name是成对的。绑定时，将层级较小的id记在层级较大的组上！！！') }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions class="item" :title="$t('元素指标')" :column="1" border>
        <el-descriptions-item label="name">{{ $t('元素名') }}</el-descriptions-item>
        <el-descriptions-item label="url">{{ $t('图片地址') }}</el-descriptions-item>
        <el-descriptions-item label="max">{{ $t('最大HP，-1表示无限') }}</el-descriptions-item>
        <el-descriptions-item label="currentCount">{{ $t('当前HP，每次使用HP+1，当HP等于max时将不可再生') }}</el-descriptions-item>
      </el-descriptions>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const visibleByDesc = ref(false)
</script>

<style lang="less" scoped>
@import url('../../assets/less/mixin.less');
.item+.item{margin-top:20px;}
</style>
